<!DOCTYPE html>
<meta charset="utf-8">
<style>
    @font-face {
        font-family: 'NeuesBauenDemo';
        src: url('CSD-Block-Bold.ttf') format('truetype');
        font-weight: normal;
        font-style: normal;
    }
    *{
        padding:0px;
        margin: 0px;
    }
    html{
        background:#000;

    }
    p{
        font-family: 'NeuesBauenDemo';
    }
    .dd{
        width: 100px;
        height:100px;
        background: #fc8c84;
        transform-origin: 50% 50%;
        transform: rotate(45deg);
    }
    .svg-level-g-origin{
        /*transform: rotate(0deg);*/
        /*-webkit-transform-origin: 50% 50%;*/
        /*-moz-transform-origin: 50% 50%;*/
        /*transform-origin: center center 0;*/
    }
</style>
<body>
<!--<svg width="120" height="120"  viewBox="0 0 120 120">-->

    <!--<polygon points="60,30 90,90 30,90">-->
        <!--<animateTransform attributeName="transform"-->
                          <!--attributeType="XML"-->
                          <!--type="rotate"-->
                          <!--from="0 60 60"-->
                          <!--to="360 60 60"-->
                          <!--dur="10s"-->
                          <!--repeatCount="indefinite"/>-->
    <!--</polygon>-->
<!--</svg>-->
<!--<svg width="320" height="320"  xmlns="http://www.w3.org/2000/svg">-->
    <!--<g>-->
        <!--<text font-family="microsoft yahei" font-size="120" y="160" x="160">马</text>-->
        <!--<animateTransform-->
                <!--attributeName="transform"-->
                <!--begin="0s" dur="10s"-->
                <!--type="rotate"-->
                <!--from="0 160 160" to="360 160 160"-->
                <!--repeatCount="indefinite"/>-->
    <!--</g>-->
<!--</svg>-->
<!--<div style="width: 1024px;height: 640px;border: 1px solid #ff0000;">-->

    <!--<svg class="svg-level-6" width="1024" height="640" viewBox="0 0 1440 900"  >-->
        <!--<g class="st0 svg-level-g-origin">-->
            <!--<polygon class="st1" points="712.9,446.1 713,446.5 712,445.8 	"/>-->
            <!--<path class="st1" d="M650.4,278.9l4.1,11c-31,12.1-58.8,33.5-78.7,63.2l-0.2,0.4l-9.7-6.6l0.2-0.3-->
		<!--C587.4,314.7,617.1,291.8,650.4,278.9z"/>-->
            <!--<path class="st1" d="M738,267.8l-1.4,11.7c-19-2.3-38.3-1.3-56.8,2.8l-2.5-11.5C697,266.4,717.6,265.3,738,267.8z"/>-->
            <!--<path class="st1" d="M816.8,297.1c57.7,38.7,85.9,105.1,78.9,169.8l-11.7-1.3c6.6-60.5-19.8-122.6-73.8-158.8-->
		<!--c-5.9-4-12-7.5-18.2-10.6l5.3-10.5C804,289.1,810.5,292.9,816.8,297.1z"/>-->
            <!--<path class="st1" d="M834.3,568l8.2,8.4c-12.7,12.4-26.9,22.6-42.1,30.6l-5.5-10.4C809.2,589.1,822.4,579.6,834.3,568z"/>-->
            <!--<path class="st1" d="M755.2,611.5l2.7,11.4c-47.3,11.3-99.1,3.6-142.6-25.6c-17.5-11.7-32.3-26-44.2-42c3.1-2.3,6.2-4.7,9.4-7-->
		<!--c11.1,15,25,28.3,41.3,39.3C662.6,614.8,711,622,755.2,611.5z"/>-->
            <!--<path class="st1" d="M551.3,484c2.2,10.1,5.4,19.9,9.5,29.5l-10.8,4.6c-4.3-10.2-7.7-20.7-10.1-31.5L551.3,484z"/>-->
            <!--<path class="st1" d="M558.1,387.2c-4.6,12.2-7.7,24.7-9.4,37.3L537,423c1.8-13.5,5.1-26.9,10.1-39.9L558.1,387.2z"/>-->
            <!--<polygon class="st1" points="712.9,446.1 713,446.5 712,445.8 	"/>-->

            <!--<animateTransform attributeName="transform" attributeType="XML"-->
                              <!--type="scale"-->
                              <!--from="0 " to="1 "-->
                              <!--begin="0s" dur="2s"-->
                              <!--additive="sum"-->
            <!--/>-->
            <!--<animateTransform attributeName="transform" attributeType="XML"-->
                              <!--type="rotate"-->
                              <!--from="0 720 450" to="360 720 450"-->
                              <!--begin="0s" dur="4.5s"-->
                              <!--fill="freeze"-->
                              <!--additive="sum"-->
                              <!--repeatCount="indefinite"-->
            <!--/>-->
        <!--</g>-->
    <!--</svg>-->
<!--</div>-->
<svg id="chart">
    <defs>

        <linearGradient id="grad1" x1="0%" y1="0%" x2="0%" y2="100%">

            <stop offset="0%" style="stop-color:rgb(46,170,216);stop-opacity:1" />

            <stop offset="100%" style="stop-color:rgb(46,170,216);stop-opacity:0.2" />

        </linearGradient>

    </defs>
</svg>
<!--<script src="../public/js/d"></script>-->
<script src="//d3js.org/d3.v4.min.js"></script>
<script>

    var margin = {top: 40, right: 340, bottom: 40, left: 200},

    data = [
        {date: 1, close: 25.35},
        {date: 2, close: 25.35},
        {date: 3, close: 9.92},
        {date: 4, close: 69.80},
        {date: 5, close: 9.47},
        {date: 6, close: 10.39},
        {date: 7, close: 10.40},
        {date: 8, close: 9.47},
        {date: 9, close: 10.39},
        {date: 10, close: 10.40}
    ]

    data1 = [  //散点数据
        {date: 1, close: 25.35},
        {date: 1.5, close: 15.35},
        {date: 2, close: 25.35},
        {date: 3, close: 9.92},
        {date: 4, close: 69.80},
        {date: 5, close: 9.47},
        {date: 6, close: 10.39},
        {date: 7, close: 10.40},
        {date: 8, close: 9.47},
        {date: 9, close: 10.39},
        {date: 10, close: 10.40}
    ]

    data2 = [  //面积和曲线数据
        {date: 0, close: 20.35},
        {date: 1, close: 20.35},
        {date: 1.5, close: 10.35},
        {date: 2, close: 15.35},
        {date: 3, close: 15.92},
        {date: 4, close: 60.80},
        {date: 5, close: 15.47},
        {date: 6, close: 5.39},
        {date: 7, close: 6.40},
        {date: 8, close: 15.47},
        {date: 9, close: 20.39},
        {date: 10, close: 50.40}
    ]


    width = 960 - margin.left - margin.right,
            height = 500 - margin.top - margin.bottom;
    var x = d3.scaleLinear()
            .domain([0, d3.max(data, function(d) { return d.date; })])
            .range([0, width]);

    var y = d3.scaleLinear()
            .domain([0, d3.max(data, function(d) { return d.close; })])
            .range([height, 0]);

    var svg = d3.select("#chart")
            .attr("width", width + margin.left + margin.right)
            .attr("height", height + margin.top + margin.bottom)
            .append("g")
            .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

    svg.append("g")
        .attr("class", "axis axis--x")
        .attr("transform", "translate(0," + height + ")")
        .call(d3.axisBottom(x).tickSize(-height).ticks(5))
        .attr("stroke","#20CAF2")
        .append("text")
        .attr("x", width)
        .attr("y", -3)
        .attr("dy", "-.35em")
        .style("font-weight", "bold")
        .style("text-anchor", "middle")
//            .text("time");

    svg.append("g")
        .attr("class", "axis axis--y")
        .call(d3.axisLeft(y).tickSize(-width).ticks(5))
        .attr("stroke","#20CAF2")
        .append("text")
        .attr("x", 6)
        .attr("dy", ".35em")
        .style("font-weight", "bold")

    d3.selectAll("line").attr("stroke","#70DAFD")
    d3.selectAll('.domain').attr("stroke","#70DAFD")

    svg.append("g").attr("class","dots")
    svg.select(".dots").selectAll(".dot")
            .data(data1)
            .enter().append("circle")
            .attr("class", "dot")
            .attr("r", 4)
            .attr("cx", function(d) { return x(d.date); })
            .attr("cy", function(d) {return y(d.close); })
            .style("fill", function() { return "#70DAFD"; });

    var line = d3.line()
            .x(function(d) { return x(d.date); })
            .y(function(d) { return y(d.close); })
            .curve(d3.curveCatmullRom.alpha(0.5));
    var area = d3.area()
            .x(function(d) {
                return x(d.date);
            })
            .y1(function(d) {
                return y(d.close);
            })
            .y0(y(0))
            .curve(d3.curveCatmullRom.alpha(0.5));
    svg.append("g")
            .attr("class","area_block")
            .append("path")
            .datum(data2)
            .attr("fill", "none")
            .attr("stroke", "#70DAFD")
            .attr("stroke-linejoin", "round")
            .attr("stroke-linecap", "round")
            .attr("stroke-width", 4.5)
            .attr("d", line);
    svg.append("g")
            .attr("class","area_block")
            .append("path")
            .datum(data2)
            .attr("fill", "url(#grad1)")
            .attr("d", area);




</script>
